<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>Willkommen bei Notebubble! Diese App ist eine einfache und schnelle Möglichkeit, Ihre Notizen zu speichern und zu organisieren. Hier ist eine kurze Anleitung, die Ihnen hilft, alle Funktionen zu nutzen:</p>
	
	<h1>Hilfe und Referenz</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>Kategorien</h2>
		<p>Notizen sind in Kategorien gruppiert. Um eine zu erstellen, klicken Sie auf das Symbol <b>+</b> in der Seitenleiste.<br>
		<p>Hier können Sie Ihrer Kategorie einen Namen geben und eine Beschreibung hinzufügen. Sie können auch ein Bildsymbol und eine Hintergrundfarbe für die Kategorie auswählen (dies kann später geändert werden).</p><p>Außerdem können Sie ein Passwort festlegen, um die Kategorie privat zu machen (optional).</p>
	</div>
	
	<div class='section'>
		<h2>Notizen</h2>
		<p>Notizen werden in \"Blasen\" gespeichert (daher der Name der App), die Sie in wenigen Schritten erstellen können:<br><br>
		Das Erstellen einer Notiz ist so einfach wie das Klicken auf die Kategorie, in der Sie sie erstellen möchten, das Eingeben des Texts im unteren Bereich und das Klicken auf <b>Senden</b>. Sie können auch <b>Strg+Intro</b> auf Ihrer Tastatur drücken, um die Notiz zu senden.
		<br>
		Das Erstellen von Notizen ist so einfach, aber es gibt weitere Optionen beim Erstellen von Blasen:
		<br>
		
		<h3>Angehängte Dateien</h3>
		Sie können Dateien und Bilder an Ihre Notizen anhängen. Klicken Sie einfach auf das Büroklammersymbol im unteren Formular und wählen Sie die Datei aus, die Sie anhängen möchten. Alternativ können Sie sie auch mit Strg+V einfügen, wenn sie bereits in Ihrer Zwischenablage sind.<br><br>
		<b>Hinweis zu den angehängten Bildern:</b><br>
		Um Speicherplatz in der Datenbank zu sparen, werden Bilder standardmäßig vor dem Hochladen in einem leichteren Format komprimiert. Wenn Sie die ursprüngliche unkomprimierte Datei behalten möchten, deaktivieren Sie die Komprimierung, bevor Sie das Bild hochladen, indem Sie auf die Zahnrad-Schaltfläche <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> im Postformular klicken und die Option \"Bilder komprimieren\" deaktivieren.
		<h3>Aufgabenlisten</h3>
		<p>Eine Blase kann Aufgabenlistenelemente mit Kontrollkästchen enthalten, die Sie an- und abwählen können, um Ihre To-Dos zu verfolgen.
Um ein Aufgabenlistenelement zu erstellen, setzen Sie einfach die Zeichen >> an den Anfang der Zeile, die Sie schreiben, so:</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>Erinnerungen</h3>
		<p>Sie können für eine Notiz eine Erinnerung festlegen, und die App wird Sie zum festgelegten Datum und zur festgelegten Uhrzeit benachrichtigen.<br><br>
		Um die Erinnerung einzustellen, klicken Sie auf das Zahnradsymbol im unteren Formular und geben Sie das gewünschte Datum und die gewünschte Uhrzeit ein. Sie können auch das Kalendersymbol verwenden, um ein Datum und eine Uhrzeit auszuwählen.
		<br><br>Die App zeigt eine Popup-Benachrichtigung an, wenn die Erinnerungszeit erreicht ist.
		</p>	
		
		<h3>Grundlegende Textformatierung</h3>
		<p>Sie können den eingegebenen Text mit einer begrenzten Markup-Syntax formatieren. Die verfügbaren Modi sind:</p>
		<table style='display:inline-block;'>
		<tr><td>**text**</td><td>=></td><td><b>Fettgedruckter Text</b></td></tr>
		<tr><td>*text*</td><td>=></td><td><i>Kursiver Text</i></td></tr>
		<tr><td>__text__</td><td>=></td><td><u>Unterstrichener Text</u></td></tr>
		</table>
		<br><br>
		Weitere Optionen werden in zukünftigen Versionen der App verfügbar sein.
	</div>

	<div class='section'>
		<h2>Notizoptionen</h2>
		<p>Nachdem Sie eine Notiz gesendet haben, gibt es einige Dinge, die Sie damit tun können. Bewegen Sie den Mauszeiger über das Symbol <span style='font-weight:bold; font-family:icons; color:#2980B9;'></span> jeder Notiz, um die Steuerungen anzuzeigen. Die verfügbaren Optionen sind:
		
		<h3>Löschen</h3>
		Löschen Sie die Notiz, wenn Sie sie nicht mehr benötigen.
		
		<h3>Bearbeiten</h3>
		Sie können den Text, Anhänge und Erinnerungen der Notiz ändern.
		
		<h3>Hervorheben</h3>
		Wenn die Notiz wichtig ist, können Sie hier klicken, um sie hervorzuheben und schneller zu finden.
		
		<h3>Notiz anheften</h3>
		Wenn die Kategorie viele Notizen enthält und Sie regelmäßig auf eine zugreifen müssen, können Sie sie anheften, um eine Benachrichtigung über eine angeheftete Notiz oben in der Kategorie anzuzeigen. Wenn Sie auf diese Benachrichtigung klicken, gelangen Sie direkt zur angehefteten Notiz.
	</div>

	<div class='section'>
		<h2>Kategorieoptionen</h2>
		Wie bei den Notizen gibt es auch bei den Kategorien Optionen, auf die Sie zugreifen können, indem Sie auf das Menüsymbol oben in der Kategorie klicken. Die verfügbaren Optionen sind:
		
		<h3>Bearbeiten</h3>
		Sie können den Namen, die Beschreibung, das Bild, den Hintergrund und das Passwort der Kategorie bearbeiten, falls vorhanden.
		
		<h3>Anheften</h3>
		Wie bei den Notizen können auch Kategorien angeheftet werden. Dadurch werden sie oben in der Kategorienliste für einen schnellen Zugriff angezeigt.
		
		<h3>Löschen</h3>
		Wenn Sie eine Kategorie nicht mehr benötigen, können Sie sie löschen. Dadurch werden auch alle ihre Notizen und Anhänge gelöscht.
	</div>
	
	<div class='section'>
		<h2>Suche</h2>
		
		Wenn Sie Notizen anhand ihres Inhalts finden müssen, klicken Sie auf das Suchsymbol im Kategorienmenü. Dies öffnet das Suchformular, in das Sie den Text eingeben können, den Sie suchen möchten. Nach dem Absenden der Suche zeigt das System die Notizen an, die den gesuchten Text enthalten.
	</div>

	<div class='section'>
		<h2>App-Einstellungen</h2>
		
		Wenn Sie auf das Zahnradsymbol <span style='font-weight:bold; font-family:icons; color:#2980B9;'>()</span> im Seitenleistenmenü klicken, gelangen Sie zur Einstellungsseite. Die verfügbaren Einstellungen sind:
		
		<h3>Sprache und Zeitzone</h3>
		Hier können Sie die Sprache der App und Ihre Zeitzone ändern. Wenn die Uhrzeit und das Datum der App falsch sind, wählen Sie die nächstgelegene Stadt aus. Klicken Sie dann auf die Schaltfläche, um die Änderungen zu speichern.
		
		<h3>Datenbankverwaltung</h3>
		Normalerweise müssen Sie diese Einstellungen nicht ändern, aber wenn Sie die Datenbank an einem anderen Ort auf Ihrem Computer ablegen möchten (z. B. in einem Cloud-Speicherordner), können Sie sie hier konfigurieren. Beachten Sie jedoch, dass das Ändern dieser Einstellung den Speicherort der Datenbank an dem von Ihnen konfigurierten spezifischen Ort festlegt. Wenn Sie die Datenbank portabel halten möchten, ändern Sie diese Werte nicht.
		
		<h3>Hinweise zu den Einstellungen:</h3>
		Das Löschen des Ordners \"notebubble\" setzt die App zurück, einschließlich Ihrer Notizen und Einstellungen. Um alles portabel zu halten, stellen Sie sicher, dass der Ordner zusammen mit der ausführbaren Datei der App bleibt.
	</div>
	</div>
</div>";

echo renderPage($content);

